<template>
    <div>
        <el-button type="primary" @click="insertDialog"> 新增</el-button>
        <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border class="company-table" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass"  v-loading="tableLoading">
            <el-table-column fixed prop="id" label="id" sortable align="center" min-width="40"></el-table-column>
            <el-table-column prop="type" label="码表类型" sortable min-width="200"></el-table-column>
            <el-table-column prop="typeDesc" label="码表描述" sortable min-width="600"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="90">
                <template slot-scope="scope">
                    <el-button  @click="updateDialog(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button  @click="deleteDialog(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"></el-pagination>

        <!-- 详情 -->
        <el-dialog :title="dialogTitle" :visible.sync="isDialog" width="800px" top="60px" :close-on-click-modal="false" >
            <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-bottom: 15px;" type="card">
                <el-tab-pane label="详细信息" name="1" :style="dialogHeight">
                    <el-form label-width="90px" :model="dialogList" >
                        <el-form-item label="码表类型"><el-input v-model="dialogList.type"></el-input></el-form-item>
                        <el-form-item label="码表描述"><el-input v-model="dialogList.typeDesc" type="textarea" :row="8"></el-input></el-form-item>
                    </el-form>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="submitDialog" >提交</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane v-if="dialogTitle==='编辑'"  label="码表信息" name="2" :style="dialogHeight">
                    <el-button type="primary" @click="insertCodeDialog"> 新增</el-button>
                    <el-table :data="tableCodeData" stripe border class="company-table" :height="tableCodeHeight" style="width: 100%;" :header-cell-style="getRowClass">
                        <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
                        <el-table-column prop="code" label="参数" sortable min-width="130"></el-table-column>
                        <el-table-column prop="name" label="显示" sortable min-width="100"></el-table-column>
                        <el-table-column prop="remark" label="备注" sortable min-width="300"></el-table-column>
                        <el-table-column fixed="right" label="操作" sortable align="center" min-width="90">
                            <template slot-scope="scope">
                                <el-button  @click="updateCodeDialog(scope.row)" type="text" size="small">编辑</el-button>
                                <el-button  @click="deleteCodeDialog(scope.row)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

        <!-- 代码详情 -->
        <el-dialog :title="dialogCodeTitle" :visible.sync="isCodeDialog" width="400px" center :close-on-click-modal="false" >
            <el-form label-width="90px"  :model="dialogCodeList">
                <el-form-item label="参数(code)"><el-input v-model="dialogCodeList.code"></el-input></el-form-item>
                <el-form-item label="显示(name)"><el-input v-model="dialogCodeList.name"></el-input></el-form-item>
                <el-form-item label="备注"><el-input v-model="dialogCodeList.remark" type="textarea" :row="12"></el-input></el-form-item>
            </el-form>
            <div slot="footer" style="text-align: right;">
                <el-button type="primary" @click="submitCodeDialog" >提交</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import api from '@/axios/api.js'
    export default {
        name: "index",
        data(){
            return {
                tokenId: sessionStorage.getItem("tokenId"),
                currentPage: 1,
                pagesize: 10,
                activeName:'1',
                tableHeight: document.documentElement.clientHeight - 160,
                tableData:[],
                tableLoading:false,
                dialogHeight: {
                    height: document.documentElement.clientHeight - 290+ 'px',
                    overflowY: 'auto',
                },

                isDialog: false,
                dialogTitle:'',
                dialogList:{
                    id: '',
                    type: '',
                    typeDesc: '',
                },

                //码表
                tableCodeHeight: document.documentElement.clientHeight - 360,
                tableCodeData:[],
                isCodeDialog: false,
                dialogCodeTitle:'',
                dialogCodeList:{
                    code: '',
                    id: '',
                    name: '',
                    remark: '',
                    type: '',
                }

            }
        },
        created(){
            this.getData();
        },
        methods:{
            getData() {
                let _this = this;
                _this.tableLoading=true;
                api.codeType().then(res=>{
                    _this.tableLoading=false;
                    _this.tableData=res.content;
                },error=>{
                     _this.tableLoading=false;
                });
            },
            insertDialog(){
                this.isDialog = true;
                this.activeName = '1';
                this.dialogTitle = '添加';
                this.dialogList={
                    id: '',
                    type: '',
                    typeDesc: '',
                };
            },
            updateDialog(row){
                this.isDialog = true;
                this.dialogTitle = '编辑';
                this.activeName = '1';
                this.dialogList = row;
            },
            deleteDialog(row){
                let _this = this;
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    api.deleteCode(row.id).then(res=>{
                         _this.getData();
                    });
                }).catch(() => {});
            },
            submitDialog(){
                let _this = this;
                let type =  _this.dialogTitle === '添加' ? 'insert': ( _this.dialogTitle === '编辑' ? 'update' : '' );
                api.insertAndUpdateCode(type,_this.dialogList).then(res=>{
                    _this.isDialog = false;
                    _this.getData();
                })
            },

            //子码表
            getCodeData() {
                let _this = this;
                api.subCode(_this.dialogList.id).then(res=>{
                    _this.tableCodeData = res.content;
                })
            },
            insertCodeDialog(){
                this.isCodeDialog = true;
                this.dialogCodeTitle = '添加';
                this.dialogCodeList={
                    code: '',
                    id: '',
                    name: '',
                    remark: '',
                    type: this.dialogList.id,
                };
            },
            updateCodeDialog(row){
                this.isCodeDialog = true;
                this.dialogCodeTitle = '编辑';
                this.dialogCodeList = row;
            },
            deleteCodeDialog(row){
                let _this = this;
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    api.deleteSubcode(row.id).then(res=>{
                        _this.getCodeData();
                    })
                }).catch(() => {});
            },
            submitCodeDialog(){
                let _this = this;
                let type =  _this.dialogCodeTitle === '添加' ? 'insert': ( _this.dialogCodeTitle === '编辑' ? 'update': '' );
                api.insertAndUpdateSubcode(type,this.dialogCodeList).then(res=>{
                    _this.isCodeDialog = false;
                    _this.getCodeData();
                });
            },
            handleClick(tab,event) {
                if(tab.name==='2'){
                    this.getCodeData();
                }
            },
            handleSizeChange(size) {
                this.pagesize = size;
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
            },
        }
    }
</script>

<style scoped>

</style>
